<template>
<h3>这是child.vue</h3>
<p>{{title}}</p>
<p>{{day}}</p>
<p>{{object}}</p>
<p>{{array}}</p>
<button @click="clickEventHandle1">按钮</button>
<input type="text" v-model="localValue" placeholder="请输入..."></input>
<p>子组件本地值:{{localValue}}</p>
<slot></slot>
</template>
<style>
</style>
<script>
export default{
    data(){
        return{
            msg:"child数据!",
            localValue:this.modelValue
        }
    },
    props:{
        modelValue:String,
        title:{
            type:[String,Number]
        },
        day:{
            type:Number,    
            required:true
        },
        object:{
            type:Object,
            default(){
                return {}   
            }
        },
        array:{
            type:Array,
            default(){
                return ["空"]
            }
        }
    },
    methods:{
        clickEventHandle(){
            //自定义事件,子传父使用this.$emit
            this.$emit("someEvent")
        },
        clickEventHandle1(){
           this.$emit("childEvent",this.msg)
        }
    },
    watch: {
   
    // 监听父组件传入值变化，同步到本地值
    modelValue(newVal) {
      this.localValue = newVal
    }
  }
}
</script>